<template>
	<view>
		<view class="order-nav" :style="{top:BarTop + 'px',height:BarHeight + 'px',lineHeight:BarHeight + 'px'}" >
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/back.png" mode="" class="order-nav-img" @click="backNav"></image>
			收款码
		</view>
		
		<view class="bg">
			<view class="main">
				
				<view class="title-img" @click="scanCode" @longpress="saveImg">
					<image :src="url + qrcode" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<!-- INSERT_YOUR_CODE -->
				<view class="bottom-title">
					长按保存到手机，点击识别二维码
				</view>
				
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				BarTop:'',
				BarHeight:'',
				shop_id:'',
				shop_name: '',
				src:'',
				displayLoading:'',
				qrcode: '',
				url: 'https://admin.cqycgyl.com',
			}
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.BarTop = menuButtonInfo.top;
			this.BarHeight = menuButtonInfo.height;
			// #endif
			
			this.shop_id = option.shop_id
			this.shop_name = option.shop_name

			this.$nextTick(()=>{
				// this.src = `https://store.yhflxh.com/manystore/paycode/?id=${this.shop_id}`
				this.getQrcode()
			})
			
		},
		methods:{
			cut(){
				// 获取Canvas上下文
				const ctx = uni.createCanvasContext('screenshotCanvas', this);
				console.log("ctx",ctx)
				// 1. 绘制背景（与内容区域背景一致）
				ctx.setFillStyle('#fff');
				ctx.fillRect(0, 0, 750, 1000); // 宽度750rpx，高度1000rpx（根据内容调整）
				
				// 2. 绘制图片（需先下载到本地）
				this.drawImageToCanvas(ctx);
				
				// 3. 绘制文本
				this.drawTextToCanvas(ctx);
				
				// 4. 完成绘制并生成图片
				ctx.draw(false, () => {
					// 将Canvas转换为临时图片路径
					uni.canvasToTempFilePath({
					canvasId: 'screenshotCanvas',
					success: (res) => {
						console.log('截屏成功', res.tempFilePath);
						this.screenshotUrl = res.tempFilePath;
						// 保存到相册
						this.saveToAlbum(res.tempFilePath);
					},
					fail: (err) => {
						console.error('Canvas转图片失败', err);
						uni.showToast({ title: '截屏失败', icon: 'none' });
					}
					}, this);
				});
			},


			// 绘制图片到Canvas
			drawImageToCanvas(ctx) {
				console.log("绘制图片")
				// 网络图片需先下载，本地图片可直接使用
				uni.getImageInfo({
					src: '/static/images/temp.png', // 本地图片路径
					success: (res) => {
					// 绘制图片（x:50, y:50, 宽:200, 高:200）
					ctx.drawImage(res.path, 50, 50, 200, 200);
					},
					fail: (err) => {
					console.error('获取图片信息失败', err);
					}
				});
			},
			
			// 绘制文本到Canvas
			drawTextToCanvas(ctx) {
				console.log("绘制文本")
				// 绘制标题
				ctx.setFontSize(36); // 字体大小
				ctx.setFillStyle('#333'); // 字体颜色
				ctx.fillText('这是需要截屏的内容', 50, 300); // (文本, x, y)
				
				// 绘制描述
				ctx.setFontSize(28);
				ctx.setFillStyle('#666');
				ctx.fillText('可以包含文本、图片等元素', 50, 350);
			},
			
			// 保存图片到相册
			saveToAlbum(filePath) {
				uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: () => {
					uni.showToast({ title: '已保存到相册', icon: 'success' });
					},
					fail: (err) => {
					console.error('保存失败', err);
					// 若未授权，引导用户开启权限
					if (err.errMsg.includes('auth deny')) {
						uni.showModal({
						title: '提示',
						content: '需要授权保存相册权限',
						success: (res) => {
							if (res.confirm) {
							uni.openSetting({
								success: (setting) => {
								if (setting.authSetting['scope.writePhotosAlbum']) {
									this.saveToAlbum(filePath);
								}
								}
							});
							}
						}
						});
					}
					}
				});
			},
			backNav(){
				uni.navigateBack({
					delta:1,
				})
			},
			getQrcode(){
				let params = {
					shop_id: this.shop_id, 
				}
				this.$u.api.shop.getQrcode(params).then(res =>{
					console.log(res)
					if(res.code == 200){
						this.qrcode = res.data
					}else{
						this.$u.toast(res.msg)
					}
				}).catch(res=>{
					this.$u.toast(res.data.msg)
				})
			},
			saveImg(){
				var that = this
				if(this.qrcode == ''){
					this.$u.toast('保存失败')
					return
				}
				//获取相册授权
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									//这里是用户同意授权后的回调
									that.saveImgToLocal();
								},
								fail() {//这里是用户拒绝授权后的回调
									// this.openSettingBtnHidden=false
								},
								complete(res) {
									/* 判断如果没有授权就打开设置选项让用户重新授权 */
									uni.getSetting({
										success(res) {
											if (!res.authSetting['scope.writePhotosAlbum']) {
											   /* 打开设置的方法 */
												that.openInstall();
											}
										}
									});
								}
							})
						} else {//用户已经授权过了
							that.saveImgToLocal();
						}
					}
				})
			},
			saveImgToLocal(){ 
				var that = this
				uni.showLoading({
					title: '保存中...'
				})
				uni.downloadFile({
					url:that.url + that.qrcode,//图片地址
					success: (res) =>{
						if (res.statusCode === 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存失败",
										icon: "none"
									});
								},
							});
						} 
					}
				})      
			},	
			openInstall() {
				uni.showModal({
					content: '没有授权保存图片到相册,点击确定去允许授权',
					success: function(res) {
						if (res.confirm) {
							/* 打开设置的API*/
							uni.openSetting({
								success(res) {
								}
							});
						} else if (res.cancel) {
							uni.showModal({
								cancelText: '取消',
								confirmText: '重新授权',
								content: '你点击了取消，将无法进行保存操作',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												/* 授权成功 */
												console.log(res.authSetting);
											}
										});
									} else if (res.cancel) {
										console.log('用户不授权');
									}
								}
							});
						}
					}
				});
			},
			Gotopage(index){
				uni.navigateTo({
					url:'./orders'
				})
		    },
			scanCode(){
				uni.showLoading({
					title: '识别中...'
				})
				
				if(this.qrcode==''){
					this.$u.toast('商家未进件，暂不可收款')
					return;
				}
				
				setTimeout(()=>{
					uni.navigateTo({
						url: '/pages/mall/onlinepay?shop_id='+this.shop_id
					})
				},1000)
				
			},
		}
	}
</script>

<style>
	.order-nav{width: 100%;font-size: 32rpx;font-weight: bold;text-align: center;position: fixed;color: white;z-index: 999;}
	.order-nav-img{width: 17rpx;height: 34rpx;position: absolute;left: 20rpx;padding: 15rpx 15rpx 15rpx 10rpx;z-index: 999;}
	.nav-sp{position: absolute;width: 100%;left: 0rpx;text-align: center;}
	.bg{
		width: 100vw;
		height: 100vh;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Group%203865%402x.png') center/cover;
	}
	.main{
		width: 662rpx;
		height: 850rpx;
		position: relative;
		top: 300rpx;
		left: 44rpx;
		z-index: 999;
	}
	.main-top{
		width: 100%;
		height: 100rpx;
		background-color: #ECFAF5;
		position: absolute;
		top: 0;
		left: 0;
	}
	.sp{
		font-size: 32rpx;
		color: #45C39E;
		font-weight: bold;
		font-family: PingFang SC-Bold;
		line-height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.spimg{
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}
	.title{
		width: 100%;
		height: 44rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Bold;
		font-weight: bold;
		color: black;
		position: absolute;
		top: 186rpx;
		text-align: center;
		line-height: 44rpx;
	}
	.title-img{
		width: 100%;
		height: 100%;
		background-color: rgba(64, 193, 153, 0.15);
		border-radius: 34rpx;
		box-shadow: 0rpx 8rpx 21rpx 0rpx rgba(64,193,153,0.15);
	}
	.bottom-title{
		width: 100%;
		height: 44rpx;
		position: absolute;
		bottom: 110rpx;
		color: rgb(0 0 0);
		font-family: PingFang SC-Bold;
		font-weight: bold;
		text-align: center;
		top: 537rpx;
		line-height: 44rpx;
		font-size: 12px;
	}
	.dow{
		width:604rpx;
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		height: 40rpx;
		display: flex;
	}
	.dowimg{
		width: 40rpx;
		height: 40rpx;
	}
	.dowsp{
		width: 555rpx;
		margin-left: 5rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}
	.rightimg{
		width: 15rpx;
		height: 19rpx;
		margin-top: 15rpx;
	}
</style>